<!DOCTYPE html>
<html>

<head>
    <title>Accessible Map</title>
    <link rel="stylesheet" href="./4.2.0/css/ol.css" type="text/css">
    <!-- <link rel="stylesheet" href="./4.2.0/css/dev/mapWMS.css" type="text/css" /> -->

    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="./4.2.0/js/ol.js"></script>
    <script src="https://cdn.bootcss.com/Turf.js/5.1.6/turf.js"></script>
</head>

<body>
    <div id="map" class="map"></div>
    <script src="./4.2.0/js/dev/tools.js"></script>
    <!-- <script src="./4.2.0/js/dev/mapLayer.js"></script> -->
    <script src="./4.2.0/js/dev/mapWMS.js"></script>
    <script>
        var extent = [-70.823364, -33.553984, -70.473175, -33.302986];
        var cellSide = 3;
        var options = {
            units: 'miles'
        };

        var grid = turf.pointGrid(extent, cellSide, options);

        for (var i = 0; i < pointGrid.features.length; i++) {
            pointGrid.features[i].properties.temperature = Math.random() * 10;
        }
        var breaks = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

        var lines = turf.isolines(pointGrid, breaks, {
            zProperty: 'temperature'
        });
        var vectorSource = new ol.source.Vector({
            features: (new ol.format.GeoJSON()).readFeatures(lines)
        });
        var image = new ol.style.Circle({
            radius: 5,
            fill: null,
            stroke: new ol.style.Stroke({
                color: 'red',
                width: 1
            })
        });
        var styles = {
            'Point': new ol.style.Style({
                image: image
            }),
            'LineString': new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'green',
                    width: 1
                })
            }),
            'MultiLineString': new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'green',
                    width: 1
                })
            }),
            'MultiPoint': new ol.style.Style({
                image: image
            }),
            'MultiPolygon': new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'yellow',
                    width: 1
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(255, 255, 0, 0.1)'
                })
            }),
            'Polygon': new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    lineDash: [4],
                    width: 3
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(0, 0, 255, 0.1)'
                })
            }),
            'GeometryCollection': new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'magenta',
                    width: 2
                }),
                fill: new ol.style.Fill({
                    color: 'magenta'
                }),
                image: new ol.style.Circle({
                    radius: 10,
                    fill: null,
                    stroke: new ol.style.Stroke({
                        color: 'magenta'
                    })
                })
            }),
            'Circle': new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'red',
                    width: 2
                }),
                fill: new ol.style.Fill({
                    color: 'rgba(255,0,0,0.2)'
                })
            })
        };

        var styleFunction = function(feature) {
            return styles[feature.getGeometry().getType()];
        };
        var vectorLayer = new ol.layer.Vector({
            source: vectorSource,
            style: styleFunction((new ol.format.GeoJSON()).readFeatures(lines)[0])
        });
        map.addLayer(vectorLayer);
    </script>
</body>

</html>